import React from 'react';
import { Card, Descriptions } from 'antd';
import SearchTable from '@/components/common/SearchTable';
import { getDicByKey } from '@/support/common';
import { connect } from 'dva';
import moment from 'moment';

import PropTypes from 'prop-types';

@connect((state: any) => ({
  vehicleInfo: state.vehicleInfo,
  loading: state.loading.effects['vehicleInfo/getDataWithRes'],
}))
export default class TboxTab extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        deviceId: '',
        deviceName: '',
        deviceStatus: '',
        versionHardware: '',
        createDate: '',
        versionSoftware: '',
        batchNo: '',
        imei: '',
        ssid: '',
        pin: '',
        locBluetoothIds: '',
        dynamicSecretkey: '',
        deviceSkey: '',
        bluetoothMac: '',
        bluetoothId: '',
        bluetoothName: '',
        eolDate: '',
        aesKey: '',
        atbType: '',
        productReference: '',
        apnFlag: '',
        atbSn: '',
      },
    };
  }
  onSource = (page, size, args) =>
    new Promise(async resolve => {
      const { vehicleInfo } = this.props;
      const res = await this.props.dispatch({
        type: 'vehicleInfo/getFetchPage',
        payload: {
          url: '/ipda/findreplacehistory',
          // vin: 'LGJETESTCAOLU0001',
          vin: vehicleInfo.vin,
          current: page,
          pageSize: size,
          deviceType: 2,
          ...args,
        },
      });
      if (res && res.statusCode === '0') {
        resolve({
          total: res.data.pagination.total,
          data: res.data.list,
        });
      } else {
        resolve({
          total: 0,
          data: [],
        });
      }
    });

  static contextTypes = {
    dicData: PropTypes.any,
  };

  componentDidMount() {
    this.getDetail();
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  getDetail() {
    const { vehicleInfo } = this.props;
    const { dispatch } = this.props;

    vehicleInfo.tbox
      ? dispatch({
          type: 'vehicleInfo/getDataWithRes',
          payload: {
            url: '/basedata/findtboxdetail',
            deviceId: vehicleInfo.tbox,
          },
          callback: response => {
            if (response && response.statusCode == '0' && response.data) {
              this.setState({
                data: Object.assign(this.state.data, response.data),
              });
            }
          },
        })
      : '';
  }
  render() {
    const { context } = this;
    const { data } = this.state;
    const { loading } = this.props;
    const {
      vehicleInfo: {
        pageData: { pagination },
      },
    } = this.props;

    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        render: (text: any, record: any, index: any) => {
          return index + 1 + (pagination.current - 1) * pagination.pageSize;
        },
      },
      {
        title: '换件时间',
        dataIndex: 'createDate',
        render: (text: any, record: any, index: any) => {
          return text && moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '原TBOX编号',
        dataIndex: 'oldDeviceId',
      },
      {
        title: '原一体机编号',
        dataIndex: 'oldAtbSn',
      },
      {
        title: '新TBOX编号',
        dataIndex: 'newDeviceId',
      },
      {
        title: '新一体机编号',
        dataIndex: 'newAtbSn',
      },
    ];
    return (
      <>
        <Card bordered={false} loading={loading}>
          <Descriptions bordered size="small" style={{ overflow: 'hidden' }}>
            <Descriptions.Item label="TBOX编号">{data.deviceId}</Descriptions.Item>
            <Descriptions.Item label="设备名称">{data.deviceName}</Descriptions.Item>
            <Descriptions.Item label="设备状态">
              {data.deviceStatus
                ? getDicByKey(context.dicData, 'deviceStatus', data.deviceStatus.toString())
                : ''}
            </Descriptions.Item>
            <Descriptions.Item label="硬件版本号">{data.versionHardware}</Descriptions.Item>
            <Descriptions.Item label="入库时间">{data.createDate}</Descriptions.Item>
            <Descriptions.Item label="软件版本号">{data.versionSoftware}</Descriptions.Item>
            <Descriptions.Item label="批次号">{data.batchNo}</Descriptions.Item>
            <Descriptions.Item label="IMEI">{data.imei}</Descriptions.Item>
            <Descriptions.Item label="WIFI账号">{data.ssid}</Descriptions.Item>
            <Descriptions.Item label="WIFI密码">{data.pin}</Descriptions.Item>
            <Descriptions.Item label="定位蓝牙ID">{data.locBluetoothIds}</Descriptions.Item>
            <Descriptions.Item label="动态秘钥">{data.dynamicSecretkey}</Descriptions.Item>
            <Descriptions.Item label="蓝牙识别码">{data.deviceSkey}</Descriptions.Item>
            <Descriptions.Item label="蓝牙MAC地址">{data.bluetoothMac}</Descriptions.Item>
            <Descriptions.Item label="蓝牙ID">{data.bluetoothId}</Descriptions.Item>
            <Descriptions.Item label="蓝牙名称">{data.bluetoothName}</Descriptions.Item>
            <Descriptions.Item label="eolDate">{data.eolDate}</Descriptions.Item>
            <Descriptions.Item label="aesKey">{data.aesKey}</Descriptions.Item>
            <Descriptions.Item label="atbType">{data.atbType}</Descriptions.Item>
            <Descriptions.Item label="productReference">
              {data.productReference
                ? getDicByKey(context.dicData, 'productReference', data.productReference)
                : '高级T'}
            </Descriptions.Item>
            <Descriptions.Item label="apnFlag">
              {data.apnFlag ? getDicByKey(context.dicData, 'apnFlag', data.apnFlag) : ''}
            </Descriptions.Item>
            <Descriptions.Item label="一体机编号">{data.atbSn}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title="换件历史记录" bordered={false}>
          <SearchTable
            tableProps={{
              rowKey: 'sid',

              scroll: { x: true },
              columns: columns,
              onSource: this.onSource,
            }}
          />
        </Card>
      </>
    );
  }
}
